<template>
  <div>
    <el-button @click="collapseAllNodes">折叠所有节点</el-button>
    <el-tree ref="treeRef" :data="treeData" node-key="id" default-expand-all></el-tree>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const treeRef = ref(null)
const treeData = ref([
  {
    id: 1,
    label: '一级 1',
    children: [
      {
        id: 4,
        label: '二级 1-1',
        children: [
          {
            id: 9,
            label: '三级 1-1-1'
          },
          {
            id: 10,
            label: '三级 1-1-2'
          }
        ]
      },
      {
        id: 11,
        label: '二级 1-2'
      }
    ]
  },
  {
    id: 2,
    label: '一级 2',
    children: [
      {
        id: 5,
        label: '二级 2-1'
      },
      {
        id: 6,
        label: '二级 2-2'
      }
    ]
  },
  {
    id: 3,
    label: '一级 3',
    children: [
      {
        id: 7,
        label: '二级 3-1'
      },
      {
        id: 8,
        label: '二级 3-2'
      }
    ]
  }
])

const collapseAllNodes = () => {
  if (treeRef.value) {
    // eslint-disable-next-line no-underscore-dangle
    const nodes = treeRef.value.store._getAllNodes()
    nodes.forEach((node) => {
      node.expanded = false
    })
  }
}
</script>
